<template>
<view class="boxcontent">
	<block v-if="isload">
		<view class="banner" >
			<!-- <view class="banner" :style="{background:'linear-gradient(180deg,'+t('color1')+' 0%,rgba('+t('color1rgb')+',0) 100%)'}"> -->
			<image :src="userinfo.headimg" background-size="cover"/>
			<view class="info">
				 <text class="nickname">{{userinfo.nickname}}</text>
				 <text>{{lang('referees')}}：{{userinfo.pid > 0 ? userinfo.pnickname : lang('there is no')}}</text>
			</view>
		</view>
		<view class="contentdata">
			<view class="order">
				<view class="head">
					<text class="f1">{{lang('My')}}<text class="wizej" v-if="lang('turn')=='to'"></text>{{t('佣金')}}</text>
					<view class="f2" @tap="goto" data-url="withdraw" v-if="comwithdraw==1"><text>{{lang('Withdraw')}}</text><image src="/static/img/arrowright.png"></image></view>
					<view class="f2" @tap="tomoney" v-else-if="commission2money=='1'"><text>{{lang('go to the')}}{{t('余额')}}{{lang('account')}}</text><image src="/static/img/arrowright.png"></image></view>
				</view>
				<view class="content">
					 <view class="item" @tap="goto" data-url="../order/shoporder?st=0">
							<text class="t1">{{userinfo.commission}}</text>
							<text class="t3">{{lang('Commission')}}</text>
					 </view>
					 <view class="item" @tap="goto" data-url="../order/shoporder?st=0">
							<text class="t1">{{count3}}</text>
							<text class="t3">
						<!-- 	{{lang('have withdrawal')}} -->
							{{lang('Withdrawable')}}</text>
					 </view>
					 <view class="item" @tap="goto" data-url="../order/shoporder?st=0">
							<text class="t1">{{userinfo.commission_yj}}</text>
							<text class="t3">{{lang('In Process')}}</text>
					 </view>
				</view>
			</view>
			<view class="order" v-if="hasfenhong">
				<view class="head">
					<text class="f1">{{t('股东分红')}}</text>
					<view class="f2" @tap="goto" data-url="fenhong"><text>{{lang('check the details')}}</text><image src="/static/img/arrowright.png"></image></view>
				</view>
				<view class="content">
					 <view class="item">
							<text class="t1">{{userinfo.fenhong}}</text>
							<text class="t3">{{lang('the cumulative gain')}}</text>
					 </view>
					 <view class="item">
							<text class="t1">{{userinfo.fenhong_yj}}</text>
							<text class="t3">{{lang('on the road')}}</text>
					 </view>
					 <view class="item"></view>
				</view>
			</view>
			<view class="order" v-if="hasteamfenhong">
				<view class="head">
					<text class="f1">{{t('团队分红')}}</text>
					<view class="f2" @tap="goto" data-url="teamfenhong"><text>{{lang('check the details')}}</text><image src="/static/img/arrowright.png"></image></view>
				</view>
				<view class="content">
					 <view class="item">
							<text class="t1">{{userinfo.teamfenhong}}</text>
							<text class="t3">{{lang('the cumulative gain')}}</text>
					 </view>
					 <view class="item">
							<text class="t1">{{userinfo.teamfenhong_yj}}</text>
							<text class="t3">{{lang('on the road')}}</text>
					 </view>
					 <view class="item"></view>
				</view>
			</view>
			<view class="order" v-if="hasareafenhong">
				<view class="head">
					<text class="f1">{{t('区域代理分红')}}</text>
					<view class="f2" @tap="goto" data-url="areafenhong"><text>{{lang('check the details')}}</text><image src="/static/img/arrowright.png"></image></view>
				</view>
				<view class="content">
					 <view class="item">
							<text class="t1">{{userinfo.areafenhong}}</text>
							<text class="t3">{{lang('the cumulative gain')}}</text>
					 </view>
					 <view class="item">
							<text class="t1">{{userinfo.areafenhong_yj}}</text>
							<text class="t3">{{lang('on the road')}}</text>
					 </view>
					 <view class="item"></view>
				</view>
			</view>
			<view class="order" v-if="hasteamfenhong && (teamnum_show==1 || teamyeji_show==1)">
				<view class="head">
					<text class="f1">{{lang('my team')}}</text>
					<view class="f2" @tap="goto" data-url="myteam"><text>{{lang('check the details')}}</text><image src="/static/img/arrowright.png"></image></view>
				</view>
				
				<view class="content">
					 <view class="item" v-if="teamnum_show==1">
							<text class="t1">{{userinfo.teamnum}}</text>
							<text class="t3">{{lang('the total number of team')}}</text>
					 </view>
					 <view class="item">
					 		<block v-if="teamyeji_show==1">
							<text class="t1">{{userinfo.teamyeji}}</text>
							<text class="t3">团队总业绩</text>
							</block>
					 </view>
					 <view class="item">
							<block v-if="gongxianfenhong_show==1">
							<text class="t1">{{userinfo.gongxianfenhong}}</text>
							<text class="t3">{{lang('expect')}}{{userinfo.gongxianfenhong_txt || lang('shareholders contribution amount of dividends')}}</text>
							</block>
					 </view>
				</view>
			</view>

			<view class="list">
				<view class="item" @tap="tomoney" v-if="comwithdraw==1 && commission2money=='1'">
					<view class="f2">{{t('佣金')}} <text class="wizej" v-if="lang('turn')=='to'"></text>{{lang('turn')}}<text class="wizej" v-if="lang('turn')=='to'"></text>{{t('余额')}}</view>
					<text class="f3"></text>
					<image src="/static/img/arrowright.png" class="f4"></image>
				</view>
			</view>
			<view class="list">
				<view class="item" @tap="goto" data-url="myteam">
					<view class="f2">{{lang('my team')}}</view>
					<text class="f3"></text>
					<image src="/static/img/arrowright.png" class="f4"></image>
				</view>
			</view>
			<view class="list">	
				<view class="item" @tap="goto" data-url="downorder">
					<view class="f2">{{lang('distribution of orders')}}</view>
					<text class="f3"></text>
					<image src="/static/img/arrowright.png" class="f4"></image>
				</view>
			</view>
			<view class="list">	
				<view class="item" @tap="goto" data-url="commissionlog">
					<view class="f2">{{lang('Commission Details')}}</view>
					<text class="f3"></text>
					<image src="/static/img/arrowright.png" class="f4"></image>
				</view>
				<!-- <view class="item" @tap="goto" data-url="poster">
					<view class="f2">{{lang('share the posters')}}</view>
					<text class="f3"></text>
					<image src="/static/img/arrowright.png" class="f4"></image>
				</view> -->
				<view class="item" @tap="goto" data-url="fhorder" v-if="showfenhong">
					<view class="f2">{{lang('order of share out bonus')}}</view>
					<text class="f3"></text>
					<image src="/static/img/arrowright.png" class="f4"></image>
				</view>
				<view class="item" @tap="goto" data-url="fhlog" v-if="showfenhong">
					<view class="f2">{{lang('record of share out bonus')}}</view>
					<text class="f3"></text>
					<image src="/static/img/arrowright.png" class="f4"></image>
				</view>
				<view class="item" @tap="goto" data-url="orderMendian" v-if="showMendianOrder">
					<view class="f2">{{lang('service order')}}</view>
					<text class="f3"></text>
					<image src="/static/img/arrowright.png" class="f4"></image>
				</view>
				<view class="item" @tap="goto" data-url="commissionlogMendian" v-if="showMendianOrder">
					<view class="f2">{{lang('service fees')}}</view>
					<text class="f3"></text>
					<image src="/static/img/arrowright.png" class="f4"></image>
				</view>
				<view class="item" @tap="goto" data-url="orderYeji" v-if="showYeji">
					<view class="f2">业绩统计</view>
					<text class="f3"></text>
					<image src="/static/img/arrowright.png" class="f4"></image>
				</view>
			</view>
		</view>
		<view style="width:100%;height:20rpx"></view>
		
		<uni-popup id="dialogInput" ref="dialogInput" type="dialog">
			<uni-popup-dialog mode="input" :title="t('佣金') + lang('turn') + t('余额')" value="" :placeholder="lang('please enter into amount)')" @confirm="tomonenyconfirm"></uni-popup-dialog>
		</uni-popup>
	</block>
	<loading v-if="loading"></loading>
	<dp-tabbar :opt="opt"></dp-tabbar>
	<popmsg ref="popmsg"></popmsg>
</view>
</template>

<script>
var app = getApp();

export default {
  data() {
    return {
			opt:{},
			loading:false,
      isload: false,
			menuindex:-1,
			pre_url:app.globalData.pre_url,
			
      hiddenmodalput: true,
      userinfo: [],
      count: 0,
      count1: 0,
      count2: 0,
      count3: 0,
      count4: 0,
      comwithdraw: 0,
      canwithdraw: true,
      money: 0,
      count0: "",
      countdqr: "",
      commission2money: "",
			showfenhong:false,
			showMendianOrder:false,
			hasfenhong:false,
			hasareafenhong:false,
			hasteamfenhong:false,
			showYeji:false,
			fxjiesuantime:0,
			teamyeji_show:0,
			teamnum_show:0,
			gongxianfenhong_show:0,
    };
  },

  onLoad: function (opt) {
		this.opt = app.getopts(opt);
		var that = this;
		this.getdata();
  },
	onPullDownRefresh: function () {
		this.getdata();
	},
  methods: {
	  lang: function(k) {
	  	return app.lang(k);
	  },
		getdata: function () {
			var that = this;
			that.loading = true;
			app.get('ApiAgent/commissionSurvey', {}, function (res) {
				that.loading = false;
				uni.setNavigationBarTitle({
					title: '我的' + that.t('佣金')
				});
				that.userinfo = res.userinfo;
				that.count = res.count;
				that.count1 = res.count1;
				that.count2 = res.count2;
				that.count3 = res.count3;
				that.count0 = res.count0;
				that.countdqr = res.countdqr;
				that.comwithdraw = res.comwithdraw;
				that.commission2money = res.commission2money;
				that.showfenhong = res.showfenhong;
				that.showMendianOrder = res.showMendianOrder;
				that.hasfenhong = res.hasfenhong;
				that.hasareafenhong = res.hasareafenhong;
				that.hasteamfenhong = res.hasteamfenhong;
				that.showYeji = res.hasYeji;
				that.fxjiesuantime = res.fxjiesuantime;
				that.teamyeji_show = res.teamyeji_show;
				that.teamnum_show = res.teamnum_show;
				that.gongxianfenhong_show = res.gongxianfenhong_show;
				that.loaded();
			});
		},
    cancel: function () {
      this.hiddenmodalput = true;
    },
    tomoney: function () {
      this.$refs.dialogInput.open()
    },
    tomonenyconfirm: function (done, val) {
			console.log(val)
      var that = this;
      var money = val;
      if (money == '' || parseFloat(money) <= 0) {
        app.alert(this.lang('please enter into amount)'));
        return;
      }
      if (parseFloat(money) > this.userinfo.commission) {
        app.alert(that.lang('can be transferred to') + that.t('佣金') + that.lang('insufficient'));
        return;
      }
			done();
			app.showLoading(that.lang('in the submission'));
      app.post('ApiAgent/commission2money', {money: money}, function (data) {
				app.showLoading(false);
        if (data.status == 0) {
          app.error(data.msg);
        } else {
          that.hiddenmodalput = true;
          app.success(data.msg);
          setTimeout(function () {
            that.getdata();
          }, 1000);
        }
      });
    }
  }
};
</script>
<style>
.banner{ display:flex;width:100%;height:560rpx;padding:40rpx 32rpx;color:#fff;position:relative}
.banner image{ width:120rpx;height:120rpx;border-radius:50%;margin-right:20rpx}
.banner .info{display:flex;flex:auto;flex-direction:column;padding-top:10rpx}
.banner .info .nickname{font-size:32rpx;font-weight:bold;padding-bottom:12rpx}
.banner .set{ width:70rpx;height:100rpx;line-height:100rpx;font-size:40rpx;text-align:center}
.banner .set image{width:50rpx;height:50rpx;border-radius:0}

.contentdata{display:flex;flex-direction:column;width:100%;padding:0 30rpx;margin-top:-380rpx;position:relative;margin-bottom:20rpx}

.order{width:100%;background:#fff;padding:0 20rpx;margin-top:20rpx;border-radius:16rpx}
.order .head{ display:flex;align-items:center;width:100%;padding:10rpx 0;border-bottom:0px solid #eee}
.order .head .f1{flex:auto;color:#333}
.order .head .f2{ display:flex;align-items:center;color:#FE2B2E;width:200rpx;padding:10rpx 0;text-align:right;justify-content:flex-end}
.order .head .f2 image{ width:30rpx;height:30rpx;}
.order .head .t3{ width: 40rpx; height: 40rpx;}
.order .content{ display:flex;width:100%;padding:10rpx 0;align-items:center;font-size:24rpx}
.order .content .item{padding:10rpx 0;flex:1;display:flex;flex-direction:column;align-items:center;position:relative}
.order .content .item image{ width:50rpx;height:50rpx}
.order .content .item .t1{color:#FE2B2E;font-size:36rpx;font-weight:bold;}
.order .content .item .t3{ padding-top:3px;color:#666}
.order .content .item .t2{background: red;color: #fff;border-radius:50%;padding: 0 10rpx;position: absolute;top: 0px;right:40rpx;width:34rpx;height:34rpx;text-align:center;}

.list{ width: 100%;background: #fff;margin-top:20rpx;padding:0 20rpx;font-size:30rpx;border-radius:16rpx}
.list .item{ height:100rpx;display:flex;align-items:center;border-bottom:0px solid #eee}
.list .item:last-child{border-bottom:0;}
.list .f1{width:50rpx;height:50rpx;line-height:50rpx;display:flex;align-items:center;}
.list .f1 image{ width:40rpx;height:40rpx;}
.list .f1 span{ width:40rpx;height:40rpx;font-size:40rpx}
.list .f2{color:#222}
.list .f3{ color: #FC5648;text-align:right;flex:1;}
.list .f4{ width: 24rpx; height: 24rpx;}
.wizej{
	width: .5em;
	display:inline-block
}
.boxcontent{
	height: 100vh;
	background: #FD4845;
}
</style>